<template>
	<div class="wrapper">
	  <header>
		<BackButton></BackButton>
		<p>我的钱包</p>
	  </header>
  
	  <div class="user-info">
		<h3>用户名： {{ user.userName }}</h3>
		<div class="avatar">
		  <input type="file" @change="handleFileChange" ref="fileInput" style="display: none;" />
		  <div>
			<h3>钱包余额：{{ wallet.balance }}</h3>
			<div style="margin: auto; display: flex; gap: 10%;">
				<button class="upload-btn" style="margin: auto;" @click="cunqian">存入</button>
				<!-- <button class="upload-btn" @click="quqian">转帐</button> -->
			</div>


		  </div>
		  <div>
			<h3>剩余积分：{{ point }}</h3>
		  </div>
		  <div>
				<button @click="jifen">积分记录</button>
			</div>
		</div>
	  </div>    
	  <Footer></Footer>
	</div>
  </template>
  
  <script setup>
  import Footer from '../components/Footer.vue';
  import BackButton from '../components/BackButton.vue';
  import axios from 'axios';
  import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
const router=useRouter();
  
  const user = ref(JSON.parse(sessionStorage.getItem('user')) || {});
  const wallet = ref({
	walletId: null,
	balance: 0
  });
  const point=ref(0);
  
  async function jifen() {
	router.push('/biaodan');
  }
  // 获取积分记录
  async function getPoints() {
	const url = `http://localhost:14000/UserController/UserPoints`;
	try {
	  const res = await axios.get(url,{
		params:{
			userId:user.value.userId
		}
	  });
	  point.value = res.data.result;
	} catch (err) {
	  console.error('获取积分失败:', err);
	  alert('获取积分失败');
	}
  }
  
  // 获取钱包余额
  async function getMoney() {
	try {
	  // First get wallet ID
	  const walletRes = await axios.get('http://localhost:14000/UserController/walletId', {
		params: { userId: user.value.userId }
	  });
	  wallet.value.walletId = walletRes.data.result;
	  // Then get balance
	  const balanceRes = await axios.get(`http://localhost:14000/VirtualWalletController/${wallet.value.walletId}`);
	  wallet.value.balance = balanceRes.data.result.balance;
	} catch (err) {
	  console.error('获取余额失败:', err);
	  alert('获取余额失败');
	}
  }
  
  // 存钱
  async function cunqian() {
	try {
	  const amount = prompt("请输入要存入的金额:");
	  if (!amount || isNaN(amount)) {
		alert("请输入有效的金额");
		return;
	  }
	  await axios.post(`http://localhost:14000/VirtualWalletController/${wallet.value.walletId}/credit`, null, {
		params: { amount: amount }
	  });
	  await getMoney();
	  alert("存入成功");
	} catch (err) {
	  console.error('存钱失败:', err);
	  alert('存钱失败');
	}
  }
  
  // 取钱
  async function quqian() {
	try {
	  const amount = prompt("请输入要取出的金额:");
	  if (!amount || isNaN(amount)) {
		alert("请输入有效的金额");
		return;
	  }
	  await axios.post(`http://localhost:14000/VirtualWalletController/${wallet.value.walletId}/debit`, null, {
		params: { amount: amount }
	  });
	  await getMoney();
	  alert("取出成功");
	} catch (err) {
	  console.error('取钱失败:', err);
	  alert('取钱失败: ' + (err.response?.data?.message || err.message));
	}
  }
  
  onMounted(() => {
	if (user.value?.userId) {
	  getMoney();
	  getPoints();
	} else {
	  alert('用户未登录');
	  // Redirect to login if needed
	}
  });
  </script>

<style scoped>
/* 页面布局与样式 */
.wrapper {
	width: 100%;
	height: 100%;
	background-color: #f5f5f5;
}

header {
	width: 100%;
	height: 12vw;
	background-color: #007bff;
	color: white;
	font-size: 4.8vw;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-info {
	margin-top: 14vw;
	padding: 4vw;
	font-size: 4vw;
	color: #333;
	background-color: white;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	text-align: center;
}

.avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.avatar img {
	width: 22vw;
	height: 22vw;
	border-radius: 50%;
	border: 3px solid #007bff;
	margin-bottom: 12px;
}

.upload-btn {
	font-size: 3.8vw;
	color: white;
	background-color: #007bff;
	border: none;
	border-radius: 8px;
	padding: 1.2vw 4vw;
	margin-top: 8px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.upload-btn:hover {
	background-color: #0056b3;
}

.logout-btn {
	font-size: 4vw;
	background-color: #dc3545;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 1.5vw 5vw;
	margin-top: 12px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.logout-btn:hover {
	background-color: #c82333;
}

/* 按钮样式 */
.address-btn, .business-btn {
	font-size: 4vw;
	width: 80%;
	background-color: #28a745;
	color: white;
	border: none;
	border-radius: 8px;
	padding: 1.5vw 0;
	margin-top: 12px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.address-btn:hover, .business-btn:hover {
	background-color: #218838;
}
</style>
